<template>
	<view class="confirm-view">
		<view class="order-addr">
			<OrderAddr isClick="true" @selectAddr="selectAddr" v-if="defAddr">
				<text slot="addr">{{defAddr.detailsAddress}} {{defAddr.streetAddress}} {{defAddr.city}}</text>
				<view slot="nameMobile">{{defAddr.firstName}} {{defAddr.lastName}}  {{defAddr.phoneNumber}}</view>
			</OrderAddr>
			<OrderAddr isClick="true" @selectAddr="selectAddr" isNot="true" v-else>
				<view slot="not">{{$t("confirmOrder.not")}}</view>
			</OrderAddr>
		</view>
		
		<view class="order-item" v-for="item in item" :key="item">
			<OrderDetilsItem :desc="item"></OrderDetilsItem>
		</view>
		
		<!-- <view class="down-time">
			{{$t("confirmOrder.downTime")}}：23:59
		</view> -->
		
		<view class="hint" v-if="!defAddr">
			<image src="../../static/icon/image_20.png" mode=""></image>
			<view class="sup">
				{{$t("confirmOrder.sup")}}
			</view>
		</view>
		
		<view class="order-cost">
			<view class="row-sty">
				<view class="cost-left">
					{{$t("confirmOrder.fre")}}
				</view>
				<view class="cost-right">
					$ 12.00
				</view>
			</view>
			<view class="row-sty">
				<view class="cost-left">
					{{$t("confirmOrder.charge")}}
				</view>
				<view class="cost-right">
					$ 12.00
				</view>
			</view>
			<view class="row-sty">
				<view class="cost-left">
					{{$t("confirmOrder.tax")}}：0.1%
				</view>
				<view class="cost-right">
					$ 9.9
				</view>
			</view>
			<view class="row-sty">
				<view class="cost-left">
					{{$t("confirmOrder.pay")}}
				</view>
				<view class="cost-right remark">
					<text>{{$t("confirmOrder.remark")}}</text> <u-icon name="arrow-right" color="#000" bold></u-icon>
				</view>
			</view>
		</view>
		
		<view class="total">
			<text class="one">{{$t("language") == "zh"?$t("confirmOrder.gong"):""}}{{item.length}}{{$t("confirmOrder.piece")}}</text>
			<text class="two">{{$t("confirmOrder.total")}}:</text>
			<text class="three">$</text>
			<text class="four">12950.12</text>
		</view>
		
		<view class="btn">
			<view class="toggleCart">{{$t("confirmOrder.bank")}}</view>
			<view class="toggleBuy">{{$t("confirmOrder.line")}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: [],
				defAddr: null
			}
		},
		methods: {
			initAddr() {
				this.defAddr = uni.getStorageSync("defAddr");
				console.log(this.defAddr);
			}
		},
		onLoad(option) {
			this.item.push(JSON.parse(decodeURIComponent(option.item)))
			this.initAddr();
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("confirmOrder.title")});
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-view {
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	.order-addr {
		height: 152rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
	}
	
	.order-item {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
		margin-top: 20rpx;
		height: 208rpx;
	}
	
	.down-time {
		color: #858585;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		margin-top: 32rpx;
		margin-bottom: 18rpx;
		text-align: center;
	}
	
	.hint {
		position: absolute;
		top: 400rpx;
		margin: auto;
		width: 684rpx;
		height: 80rpx;
		border-radius: 20rpx;
		background: #F8F8F8;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #0000003F;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		.sup {
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 28rpx;
			margin-left: 16rpx;
		}
	}
	
	.order-cost {
		width: 100%;
		height: 328rpx;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.row-sty {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			border-bottom: 2rpx solid #F1F1F1;
	
			.cost-left {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				width: 100%;
			}
	
			.cost-right {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				width: 100%;
				text-align: right;
			}
			
			.remark {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.u-icon {
					padding-top: 5rpx;
				}
			}
		}
	
		.row-sty:last-child {
			border-bottom: none;
		}
	}
	
	.total {
		margin-top: 95rpx;
		margin-bottom: 120rpx;
		
		.one {
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
		}
		
		.two {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
		
		.three {
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
		}
		
		.four {
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
		}
	}
	
	.btn {
		width: 100%;
		display: flex;
		position: fixed;
		height: 112rpx;
		bottom: 0;
		left: 0;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 0rpx;
		text-align: center;
		line-height: 112rpx;
	
		.toggleCart {
			background: #F1F1F1;
			width: 50%;
			color: #858585;
		}
	
		.toggleBuy {
			width: 50%;
			background: #000000;
			color: #FFFFFF;
	
		}
	}
</style>